<template>
	<view class="x-alert flex flex-center grid-gap-1 border pl-1 pr-2 py-1" :class="customClass" :style="customStyle" v-if="show">
		<view class="flex-1 flex flex-y-center">
			<slot/>
		</view>
		<view @tap.stop="hide" v-if="closed">
			<uni-icons type="closeempty" color="var(--color)"></uni-icons>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref,watch ,defineProps,computed } from "vue";
const props = withDefaults(defineProps<{
	show?: boolean
    type?: string
	bg?:boolean
	text?:boolean
	light?:boolean
	size?:string
	rounded?:string
	closed?:boolean
}>(), {
	show: true,
	type: 'default',
	bg:true,
	text:false,
	light:false,
	size:'10',
	rounded:'2',
	closed:true
});
const show=ref(props.show);
watch(()=>props.show,(val)=>{
	show.value=val;
});
const customClass = computed(() => {
	let result:string[]=[];
	if(props.text){
		if(props.light){
			result.push('text-'+props.type+'-light-3');
			result.push('border-'+props.type+'-light-7');
		}else{
			result.push('text-'+props.type);
			result.push('border-'+props.type);
		}
	}else{
		if(props.bg){
			result.push('bg-'+props.type+'-light-9');
			if(props.light){
				result.push('text-'+props.type+'-light-3');
				result.push('border-'+props.type+'-light-7');
			}else{
				result.push('text-'+props.type+'-light-3');
				result.push('border-'+props.type+'-light-3');
			}
		}else{
			if(props.light){
				result.push('text-'+props.type+'-light-3');
				result.push('border-'+props.type+'-light-3');
			}else{
				result.push('text-'+props.type);
				result.push('border-'+props.type);
			}
		}
	}
	result.push('h'+props.size);
	result.push('rounded-'+props.rounded);
	return result;
});
const customStyle = computed(() => {
	let result:string[]=[];
	if(props.text){
		if(props.light){
			result.push(`--color: var(--color-${props.type}-light-3);`);
		}else{
			result.push(`--color: var(--color-${props.type});`);
		}
	}else{
		if(props.bg){
			result.push(`--color: var(--color-${props.type}-light-9);`);
		}else{
			if(props.light){
				result.push(`--color: var(--color-${props.type}-light-3);`);
			}else{
				result.push(`--color: var(--color-${props.type});`);
			}
		}
	
	}
	return result
});
const hide = () => {
	show.value = false;
};
</script>

<style lang="scss" scoped>
.text-woman,.text-woman-light-3{
	color: #FFA0C1;
}
.border-woman,.border-woman-light-3{
	border-color: #FFA0C1;
}
.bg-woman-light-9{
	background-color: #FFF4F7;
}
.text-man,.text-man-light-3{
	color: #409EFF;
}
.border-man,.border-man-light-3{
	border-color: #409EFF;
}
.bg-man-light-9{
	background-color: #f0f7ff;
}
</style>